<template>
  <div id="coupon_share">
    <c-title :hide="false" :text="'分享优惠券'"></c-title>
    <div id="share_content">
      <div class="share-main flex-a-c">
        <h3>支付成功</h3>
        <div class="share-pay">
          <div class="share-bg"></div>
          <div class="share-border"></div>
          <h4>【恭喜获得{{coupon_num}}个红包可分享】</h4>
          <p>快分享给小伙伴看看谁会撞大运</p>
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/couponV2/coupon_share.png" />
          <div class="share-btn"  @click="shareClick">立即分享</div>
        </div>
      </div>
    </div>      
    
  </div>
</template>

<script>
import coupon_share_controller from "./coupon_share_controller";

export default coupon_share_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
#coupon_share {
  #share_content {
    //新的样式
    .share-main {
      background: #FFFFFF;
      border-radius: 0.9375rem;
      margin: 0.625rem 0.75rem 0 0.75rem;
      padding:0 0 2.6875rem 0;
      flex-direction: column;
      h3 {
        font-size: 1.5rem;
        font-weight: bold;
        color: #00001C;
        padding:1.75rem 0 1.375rem 0;
      }
      .share-pay {
        position: relative;
        margin:0 1.875rem;
        width:18.25rem;
        padding:0 0 1.875rem 0;
        height: 100%;
        border: 0.0625rem solid var(--themeBaseColor);
        border-radius: 1.25rem;
        .share-bg {
          width:100%;
          height: 100%;
          background-color: var(--themeBaseColor);
          opacity: 0.08;
          position: absolute;
          left:0;
          top:0;
          z-index: 0;
        }
        h4{
          font-size: 1.125rem;
          font-weight: bold;
          color: var(--themeBaseColor);
          padding:1.5625rem 0 0.75rem 0;
        }
        p {
          font-size: 0.75rem;
          font-weight: 400;
          color: #6E6E79;
          padding:0 0 1.875rem 0;
        }
        img {
          max-width: 100%;
          width:64%;
          height: auto;
        }
        .share-btn {
          font-size: 0.875rem;
          line-height: 0.875rem;
          font-weight: 500;
          color: #FFFFFF;
          padding:0.8125rem 0;
          border-radius: 1.5rem;
          background-color: var(--themeBaseColor);
          margin:0 1.375rem;
          position: relative;
          z-index: 1;
        }
      }
    }
  }
}
</style>
